<template>
  <div id="app">
    <el-table
      :data="tableData"
      border
      max-height="500px"
      stripe
      style="width: 100%">
      <el-table-column
        label="批次"
        prop="batch"
        width="200">
      </el-table-column>
      <el-table-column
        label="提交日期"
        prop="title">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" size="small" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible" title="本批次可订购列表">
      <el-table :data="batchData" @selection-change="handleSelectionChange" max-height="450px" ref="multipleTable" stripe>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="价格" property="price" width="80"></el-table-column>
        <el-table-column label="名称" property="name"></el-table-column>
      </el-table>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="save" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      batchData: [],
      multipleSelection: []
    }
  },
  mounted () {
    window.axios.get('/getBatchList').then(result => {
      if (result && result.status === 200) {
        this.tableData = result.data
      } else {
        this.tableData = []
      }
    }).catch(error => {
      this.tableData = []
      this.$message({
        message: error.message,
        type: 'error'
      })
    })
  },
  methods: {
    toggleSelection (rows) {
      this.$nextTick(() => {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push({ values: [item.batch, item.name] })
      })
    },
    handleClick (row) {
      window.axios.get('/getBatchDetailList', { params: { batch: row.batch } })
        .then(result => {
          if (result && result.status === 200) {
            this.batchData = result.data
            const selections = this.batchData.filter(item => { return item.isClicked })
            this.toggleSelection(selections)
            this.dialogFormVisible = true
          } else {
            this.batchData = []
          }
        })
        .catch(error => {
          this.batchData = []
          this.$message({
            message: error.message,
            type: 'error'
          })
        })
    },
    save () {
      window.axios.request({
        url: '/saveOrder',
        data: { values: this.multipleSelection },
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        }
      })
        .then(result => {
          if (result && result.status && result.data && result.data.code === 0) {
            this.dialogFormVisible = false
            this.$message({
              message: result.data.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: '保存失败',
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: error.message,
            type: 'error'
          })
        })
    }
  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    margin-top: 60px;
    text-align: center;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
